import React, { useState, useContext, useEffect } from 'react';
import { parse } from './parse';
import DComponent from './DComponent';
import { ReactSortable } from "ereact-sortablejs";
import { Row } from 'antd';
import WEditor from '../widgets/WEditor';
import useAppContext from '../hooks/useAppContext';
import { SELECT_NODE, UNSELECT_NODE } from '../actions/DESGIN'

import PropertyEditor from '../components/PropertyEditor';


import _ from 'lodash';

//选项
const opts = {
    group: {
        name: 'visualui',
        pull: true,
        put: true,
    },
    sort: true,
};




//面板
const DRow = (props) => {

    const { root, parent, node, pindex, onSchemaChange } = props;
    const { children = [] } = node;

    const { rootState, dispatch } = useAppContext();

    const [mouseOver, setMouseOver] = useState(false);

    const [editProps, setEditProps] = useState(false);


    //样式
    const style = {
        //width: '100%',

        borderWidth: '1px',
        borderStyle: 'dotted',
        borderColor: (((rootState.selectedCode == node.code) || mouseOver) ? 'red' : '#1890ff'),
        // margin: '5px',
        // padding: '5px'
    };

    //console.log(rootState,'rootState');
    //console.log(dispatch,'dispatch')

    //const [edit, setEdit] = useState(false);

    // const [state, setState] = useState(node.children || []);
    // // const [preState, setPreState] = useState(null);


    // // //node.children发生变化时
    // // useEffect(() => {
    // //     setState(node.children);
    // // }, [node.children]);

    // //state发生变化时
    // useEffect(() => {
    //     node.children = state;
    //     //触发修改事件
    //     onSchemaChange({ type: 'row' }, root);
    // }, [state]);

    //console.log('dispatch',dispatch);


    return <>
        {editProps ? <PropertyEditor
            node={node}
            attrList={[{
                name: 'align',
                path:'align',
                label: 'align',
                type: 'select',
                opts: [{
                    text: 'top',
                    value: 'top'
                }, {
                    text: 'middle',
                    value: 'middle'
                }, {
                    text: 'bottom',
                    value: 'bottom'
                }]
            }]}
            onChange={(newNode) => {
                //root
                onSchemaChange({ sourceType: 'row' }, _.cloneDeep(root));
            }}
            onClose={() => {
                setEditProps(false);
            }} /> : <></>}
        <WEditor code={node.code}
            onPropsEditClick={() => {
                //取消选择该节点
                dispatch({
                    type: UNSELECT_NODE
                });
                //alert('编辑按钮');
                setEditProps(true);
            }}
            onPropsDeleteClick={() => {
                //删除已选中的元素
                parent.children = parent.children.filter(m => {
                    return m.code != node.code;
                });
                onSchemaChange({ sourceType: 'root' }, _.cloneDeep(root));
            }}
        >
            <ReactSortable
                {...node.attrs}
                onMouseOver={(evt) => {
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                    setMouseOver(true);
                }}
                onMouseOut={(evt) => {
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                    setMouseOver(false);
                }}
                onClick={() => {
                    //取消选择该节点
                    dispatch({
                        type: UNSELECT_NODE
                    });

                }}
                onDoubleClick={(evt) => {
                    //setEdit(true);
                    //alert('弹出属性框Row');
                    dispatch({
                        type: SELECT_NODE,
                        code: node.code
                    });
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                }}
                tag={Row}
                {...opts}
                style={Object.assign((node.attrs.style || {}), style)}
                list={children}
                setList={(newList) => {

                    //取消选择该节点
                    // dispatch({
                    //     type: UNSELECT_NODE
                    // });

                    const newSchema = parse(newList);
                    node.children = newSchema;
                    onSchemaChange({ sourceType: 'row' }, _.cloneDeep(root));

                }}>
                {children.map((subNode, index) => {
                    return <DComponent
                        key={`${pindex}-${index}`}

                        root={root}
                        parent={node}
                        node={subNode}
                        pindex={`${pindex}-${index}`}
                        onSchemaChange={onSchemaChange}
                    />;
                })}
            </ReactSortable>
        </WEditor>
    </>


}


export default DRow;